<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx }/res/css/style.css">
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
    <script type="text/javascript" src="${ctx }/res/js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="${ctx }/res/js/jquery.scrollLoading.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <style type="text/css">
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
		
		a {
			cursor:pointer;
		}
		
		*{ margin:0; padding:0}
		select,input{font-family:Microsoft YaHei}
		.text{ width:100%; height:38px;border:#ccc solid 1px; padding:0 2%; margin:0 0 20px 0; color:#888; font-size:14px;}
		.button{ width:100%; background:#ed145b; border:none; overflow:hidden; cursor:pointer; font-size:18px; color:#fff; text-align:center; height:40px; line-height:40px; margin:20px 0 0px;}
		.select{ width:110px;border:#ccc solid 1px; height:40px; margin:0px 0; float:left; font-size:14px; margin-right:10px}
		.select1{ width:160px;border:#ccc solid 1px; height:40px; margin:0px 0; float:left; font-size:14px;}
    </style>
	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>
    <title>软装到家</title>
</head>
<body>

<%@include file="../head.jsp" %>

<!--详情-->
<div class="w-1200 margin-0-auto">
	<div class="model_show">
    	<div class="pic">
        	<img src="${d.headImage }">
            <div class="qj"><a href="${d.VRURL }" target="_blank"><strong>VR</strong>实景</a></div>
            <div class="qj" style="margin-top: 50px;">
                <a href="${d.view3dURL }" target="_blank"><strong>3D</strong>实景</a>
            </div>
        </div>
        <div class="c">
        	<h1>${d.title }</h1>
            <p>${d.community.city.name } ${d.community.district.name } ${d.communityHouseType.area }m² ${d.communityHouseType.name }</p>
            <div class="pic"><img src="${d.communityHouseType.image }"></div>
            <div class="tr">
            	<h2>详细：${d.details }</h2>
                <div class="bj">方案报价：<b><em><fmt:formatNumber value="${d.price }" type="currency" pattern="0"/></em>元</b></div>
            </div>
        </div>
        <div class="r">
        	<div class="portrait" onclick="location='${ctx}/design/designer?id=${d.designer.id }'">
                <img src="${d.user.headImage }">
                <div class="portrait_bg"><img src="${d.user.headImage }"></div>
            </div>
            <h1>${d.user.realName }</h1><p>从业${d.designer.workAge }年</p>
            <a onclick="orderDesigner(${d.designer.id});" href="#" class="btn">预约设计</a>
        </div>
    </div>   
</div>        
<!--详情 END-->
<!--方案详情-->
<div class="w-1200 margin-0-auto">
    <div class="model_showTab scrollLoading1">
        <div class="hd">
            <ul><li style="border-left:none">方案详情</li><li>方案清单</li></ul>
        </div>
        <div class="bd">
            <div>
            	${d.content } 
            </div>
            <div class="qd">
                <ul class="list">
                    <div class="title">
                        <h1>所有清单：<span>ALL LIST</span></h1>
                        <div class="jg">TOTAL: <strong>¥<b><fmt:formatNumber value="${totalCount }" type="currency" pattern="0.00"/></b></strong></div>
                    </div>
                    <c:choose>
                    	<c:when test="${designProducts != null && fn:length(designProducts) != 0 }">
                    		<c:forEach items="${designProducts }" var="p" varStatus="ps">
                    		<li onclick="javascript:window.open('${ctx }/product/detail?id=${p.product.id }');">
		                    	<img data-original="${p.product.headImage }">
		                        <div class="t">
		                        	<h1>${p.product.name }<br>${p.product.subTitle }</h1>
		                            <span>${p.product.brand.name }</span><em>¥<i>${p.specification.realPrice }</i></em>
		                        </div>
		                    </li>
		                    </c:forEach>
                    	</c:when>
                    	<c:otherwise>
                    		<div style="font-size:15px;">对不起，该设计没有提供产品清单!</div>
                    	</c:otherwise>
                    </c:choose>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">jQuery(".model_showTab").slide({trigger:"click",triggerEvent:true});</script>
<script>
$(function(){
	$(".list").each(function(){
		var sum=0;
		$(this).find('i').each(function(){
			sum+= parseFloat($(this).text());
		});
		$(this).find(".jg b").text(sum);
	});
});
</script>
<!--方案详情 END-->
<div class="blank10"></div>
<div class="blank10"></div>
<div class="blank10"></div>
<div class="blank10"></div>
<!--推荐方案-->
<div class="w-1200 margin-0-auto">
    <div class="model_show_tit">推荐方案</div>
    <div class="modelLeftLoop">
        <a class="sPrev"></a>
        <div class="bd scrollLoading1">
            <ul>
            	<c:forEach items="${designs }" var="s">
                <li onclick="${ctx}/design/detail?id=${s.id}">
                    <div class="img">
                        <img data-original="${s.headImage }">
                        <a class="btn" onclick="orderDesigner(${s.designer.id});">一键预约</a>
                    </div>
                    <div class="portrait" onclick="location='${ctx}/design/designer?id=${s.user.id }'">
                        <img src="/img/other/model-2.jpg">
                        <div class="portrait_bg"><img src="${s.user.headImage }">1111</div>
                        <div class="tit">${s.user.username }</div>
                    </div>
                    <div class="tr">
                        <h1>${s.community.name }</h1>
                        <p>${s.community.city.name } ${s.community.district.name } ${s.communityHouseType.area }m² ${s.communityHouseType.name }</p>
                    </div>
                </li>
                </c:forEach>
            </ul>
        </div>
        <a class="sNext"></a>
    </div>
</div>    
<script type="text/javascript">jQuery(".modelLeftLoop").slide({ mainCell:".bd ul",effect:"leftLoop",vis:4,autoPlay:"true",prevCell:".sPrev",nextCell:".sNext",triggerEvent:true});</script>
<!--推荐方案 END-->
<div id="designOrder_div" style="display:none;">
    <div id="order_div">
    	<form>
    		<input type="hidden" name="designerId" value="${designer.id }" />
    		<input type="text" value="姓名" name="name" onfocus="if(value=='姓名') {value=''}" onblur="if (value=='') {value='姓名'}" class="text" id="name">
    		<input type="text" value="手机号" name="mobile" onfocus="if(value=='手机号') {value=''}" onblur="if (value=='') {value='手机号'}" class="text" id="moblie">
    		<select name="provinceId" class="select">
    		 <option value="1">湖南省</option>
    		 <option value="2">广州省</option>
    		</select>
    		<select name="cityId" class="select">
    		 <option value="3">长沙市</option>
    		 <option value="3">岳阳市</option>
    		</select>
    		<select name="communityId" class="select1">
    		 <option value="1">北京大观园</option>
    		</select>
    		<input name="" type="button" class="button" onclick="return doOrder(this);" value="一键预约" id="btn">
    	</form>
    </div>
</div>
<%@include file="../foot.jsp" %>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script type="text/javascript" src="${ctx }/res/js/common.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
    }); 
</script>
</body>
</html>